<template>
    <div class="my-audio-box">
        <img :src="detail.imageUrl" alt="">
        <div class="abox">
            <my-audio :arrSrc="detail.musicFileUrls"/>
        </div>
    </div>
</template>

<script>
import { reactive,toRefs,getCurrentInstance,onMounted,computed } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import myAudio from '@/components/myAudio.vue'
export default {
    components:{
       myAudio
    },
    props:{
        
    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            detail:computed(()=>store.state.arApi.detail),
        })

        onMounted(()=>{
            
        })

        return{
            ...toRefs(state),
        
        }
    }
}
</script>

<style lang="scss" scoped>
   .my-audio-box{
        position: relative;
        z-index: 5;
        width: 100%;
        img{
            display: block;
            width: 100%;
        }
        .abox{
            position: absolute;
            z-index: 5;
            width: 150px;
            left: 50%;
            top: 50%;
            transform: translateX(-50%) translateY(-50%);
            -webkit-transform: translateX(-50%) translateY(-50%);
        }
   } 
</style>